<template>
  <div class="edit-container">
    <el-steps :active="tableData.piStateOrder" finish-status="success" align-center>

      <el-step
        v-for="(step, index) in steps"
        :key="index"
        :title="step.title"
        @click.native="handleClick(index)"
        :class="{ 'is-success': step.completed }"

      ></el-step>

    </el-steps>


    <div v-if="activePageIndex===0" style="margin-top: 20px">
      <el-descriptions  :column="3" border direction="vertical">
        <el-descriptions-item labelStyle="font-weight: bold" label="姓名">{{ tableData.personalInformationModel.name }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="性别">
          {{ tableData.personalInformationModel.sex === 1? '男' : '女' }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="⼿机号">{{ tableData.personalInformationModel.phone }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="身份证号">
          {{ tableData.personalInformationModel.idCards }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="毕业学校">{{
            tableData.personalInformationModel.school
          }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="毕业时间">
          {{ tableData.personalInformationModel.graduationTime }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="毕业证">
          <el-image
            style="width: 100px; height: 100px"
            :src="tableData.personalInformationModel.graduationUrl"
            :preview-src-list="[tableData.personalInformationModel.graduationUrl]">
          </el-image>
        </el-descriptions-item>

        <el-descriptions-item labelStyle="font-weight: bold" label="银行账号">
          {{ tableData.personalInformationModel.bankNum }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="银行名称">{{
            tableData.personalInformationModel.bank
          }}
        </el-descriptions-item>

        <el-descriptions-item label="人社局审核：" prop="personalInformationModel.state" v-if="tableData.personalInformationModel.state === 2">
          <el-select v-model="form.personalInformationModel.state" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="人社局审核：" prop="personalInformationModel.state" v-if="tableData.personalInformationModel.state !== 2">
          <el-select v-model="form.personalInformationModel.state" disabled placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="拒绝原因：" prop="remark" v-if="form.personalInformationModel.state === 0">
          <el-input v-model="form.personalInformationModel.reason" maxlength="150" placeholder="拒绝原因" type="textarea"
                    :rows="3"/>
        </el-descriptions-item>
      </el-descriptions>

      <el-form v-loading="saveLoading" ref="form" :model="form"  label-width="150px">
              <div style="margin-top: 20px; display: flex; justify-content: flex-end;" v-if="tableData.personalInformationModel.state === 2"  >
                <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary" @click="submitStatus()">保存</el-button>
                <el-button @click="close">取消</el-button>
              </div>
      </el-form>
    </div>

    <div v-if="activePageIndex=== 1" style="margin-top: 20px">
      <el-descriptions  :column="3" border
                       direction="vertical"
                       style="margin-top: 20px">
        <el-descriptions-item labelStyle="font-weight: bold" label="企业名称">
          {{ tableData.enterpriseInformationModel.ename }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="纳税人识别号">
          {{ tableData.enterpriseInformationModel.taxpayerIdentificationNumber }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="所在部门">
          {{ tableData.enterpriseInformationModel.department }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="岗位名称">
          {{ tableData.enterpriseInformationModel.postName }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="企业联系电话">
          {{ tableData.enterpriseInformationModel.ephone }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="是否全勤">
          <template>
            <div v-if="tableData.enterpriseInformationModel.fullAttendance ===1">是</div>
            <div v-else>否</div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="在职证明">
          <el-image
            style="width: 100px; height: 100px"
            :src="tableData.enterpriseInformationModel.proofOfMployment"
            :preview-src-list="[tableData.enterpriseInformationModel.proofOfMployment]">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="考勤明细（图片）">
          <el-image
            style="width: 100px; height: 100px"
            :src="tableData.enterpriseInformationModel.attendanceEtails"
            :preview-src-list="[tableData.enterpriseInformationModel.attendanceEtails]">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="人社局审核：" prop="state" v-if="tableData.enterpriseInformationModel.state === 2">
          <el-select v-model="form.enterpriseInformationModel.state" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="人社局审核：" prop="state" v-if="tableData.enterpriseInformationModel.state !== 2">
          <el-select v-model="form.enterpriseInformationModel.state" disabled placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="拒绝原因：" prop="reason" v-if="form.enterpriseInformationModel.state === 0">
          <el-input v-model="form.enterpriseInformationModel.reason" maxlength="150" placeholder="拒绝原因"
                    type="textarea" :rows="3"/>
        </el-descriptions-item>
      </el-descriptions>

      <el-form v-loading="saveLoading" ref="form" :model="form"  label-width="150px">
        <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
          <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary" @click="submitStatus1()">保存</el-button>
          <el-button @click="close">取消</el-button>
        </div>
      </el-form>
    </div>

  </div>
</template>
<script>


import {
  getBySubsidyApplicationId,
  updateStatusPOrE
} from "@/api/subsidyApplication";

export default {
  components: {},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return {rules: []}
      }
    },
  },
  data() {
    return {
      steps: [
        { title: '个人信息审核', completed: false },
        { title: '企业信息审核', completed: false }
      ],
      activePageIndex: 0, // 当前显示的页面索引

      tableData: {
        enterpriseInformationModel: [], personalInformationModel: [], subsidyApplicationDetailsModel: [],
        piStateOrder: 0
      },
      form: {
        id: null,
        state: '',
        applicationState: '',

        subsidyApplicationDetailsModel: {
          subsidyState: '',
          reason: '',
        },

        personalInformationModel: {
          state: '',
          reason: '',
        },
        enterpriseInformationModel: {
          state: '',
          reason: '',
        },

      },

      statusList: [{id: 0, name: "审核未通过"}, {id: 1, name: "审核通过"}, {id: 2, name: "待审核", disabled: true}],
      saveLoading: false,
    }
  },

  mounted() {
    this.getDetail();

  },

  methods: {
    handleClick(index) {
      if(this.tableData.personalInformationModel.state === 1 || this.tableData.enterpriseInformationModel.state === 1){
        this.steps[index].completed = true; // 更新步骤状态
        if (this.steps[index].completed) {
          this.activePageIndex = index;  // 更新激活的步骤
          console.log(this.tableData.piStateOrder)
        }
      }

    },

    getActivePageIndex(){
      this.activePageIndex = this.tableData.piStateOrder
    },
    //获取列表
    getDetail() {
      this.saveLoading = true

      getBySubsidyApplicationId({
        subsidyApplicationId: this.editData.id

      }).then((res) => {
        this.tableData = res
        // this.form.personalInformationModel = res.personalInformationModel
        // this.form.enterpriseInformationModel = res.enterpriseInformationModel
        // this.form.subsidyApplicationModel.applicationState = res.subsidyApplicationModel.applicationState

        console.log(res)
        this.getActivePageIndex();
      }).finally(() => {
        this.saveLoading = false;
      })
    },

    submitStatus() {
      console.log(this.steps[0].completed)
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        if (this.form.personalInformationModel.state !== 2 && this.form.personalInformationModel.state !== '') {
          const type = this.form.personalInformationModel.state === 1 ? 11 : 12;
          const pOrEId = this.tableData.personalInformationModel.id;
          const reason = this.form.personalInformationModel.reason;
          const subsidyApplicationDetailId = this.tableData.subsidyApplicationDetailsModel.id;
          updateStatusPOrE({
            type: type,
            pOrEId: pOrEId,
            reason: reason,
            subsidyApplicationDetailId: subsidyApplicationDetailId
          }).then(() => {
            this.$message.success('审核成功');
            console.log(this.steps[0].completed)
            if (this.form.personalInformationModel.state === 0) {
              this.close();
            }
            this.getDetail();
          }).finally(() => {
            this.saveLoading = false
          })
        }else{
          this.$message.success('保存成功');
          this.close();
        }

      })
    },
    submitStatus1() {
      console.log(this.steps[0].completed)
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        if (this.form.enterpriseInformationModel.state !== 2 && this.form.enterpriseInformationModel.state !== '') {
          const type = this.form.enterpriseInformationModel.state === 1 ? 13 : 14;
          const pOrEId = this.tableData.enterpriseInformationModel.id;
          const reason = this.form.enterpriseInformationModel.reason;
          const subsidyApplicationDetailId = this.tableData.subsidyApplicationDetailsModel.id;
          updateStatusPOrE({
            type: type,
            pOrEId: pOrEId,
            reason: reason,
            subsidyApplicationDetailId: subsidyApplicationDetailId
          }).then(() => {
            this.$message.success('审核成功');
            this.close();
          }).finally(() => {
            this.saveLoading = false
          })
        }else{
          this.$message.success('保存成功');
          this.close();
        }
      })
    },

    close() {
      this.$emit('hideExamineEditDialog')
    },

  }
}
</script>

